<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }" v-loading="loading">
        <template #header>
            <div>
                <span>申报课题</span>
            </div>
        </template>
        <template #default>
            <div style="width: 500px" v-if="!resultShow">
                <el-form :model="formData" :rules="rules" label-width="auto" ref="ruleFormRef">
                    <el-form-item label="课题标题" prop="title">
                        <el-input v-model="formData.title" type="text" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="课题简介" prop="remark">
                        <el-input
                            v-model="formData.remark"
                            type="textarea"
                            autocomplete="off"
                            show-word-limit
                            maxlength="250"
                        />
                    </el-form-item>
                    <el-form-item label="课题负责人" prop="chairman">
                        <el-input v-model="formData.chairman" type="text" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="成员" prop="mamberIds">
                        <user-select v-model="formData.mamberIds"></user-select>
                    </el-form-item>
                    <el-form-item label="标签" prop="tagIds">
                        <tag-select v-model="formData.tagIds"></tag-select>
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button type="primary" size="default" @click="submit">申报课题</el-button>
                        <el-button type="warning" size="default" @click="reset">重置表单</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-result icon="success" title="课题申报成功" sub-title="可前往课题详情处查看详情" v-else>
                <template #extra>
                    <el-button type="primary" @click="goRoute(0)">返回首页</el-button>
                    <el-button type="success" @click="goRoute(1)">查看新建课题</el-button>
                </template>
            </el-result>
        </template>
    </el-card>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import type { FormRules, FormInstance } from "element-plus";
import type { CreateSubjectForm } from "@/api/subject/type";
import { reqCreateSubject } from "@/api/subject";
// 引入仓库
import useUserStore from "@/store/modules/user";
import useLayOutSettingStore from "@/store/modules/setting";
// 引入路由
import { useRouter } from "vue-router";
// 获取仓库实例
const userStore = useUserStore();
// 定义表单对象
const formData = ref<CreateSubjectForm>({
    title: "",
    remark: "",
    mamberIds: [],
    tagIds: [],
    chairman: userStore.userId,
});
// 定义校验规则
const rules = reactive<FormRules<CreateSubjectForm>>({
    title: [{ required: true, message: "请输入课题名称", trigger: "blur" }],
    remark: [
        { required: true, message: "请输入课题简介", trigger: "blur" },
        { max: 250, message: "课题简介应在250字符以内", trigger: "blur" },
    ],
});
// 获取表单实例
const ruleFormRef = ref<FormInstance>();

// 定义加载态度
const loading = ref<boolean>(false);
// 结果页展示
const resultShow = ref<boolean>(false);
// 新课题的id
const subjectId = ref<number>(-1);
// 提交表单
const submit = () => {
    (ruleFormRef.value as FormInstance)
        .validate()
        .then(() => {
            loading.value = true;
            // 调用接口
            reqCreateSubject(formData.value).then((res) => {
                if (res.code == 200 && typeof res.data === "object") {
                    ElMessage.success("创建成功");
                    // 赋值id
                    subjectId.value = res.data.subjectId as number;
                    // 重置表单
                    resultShow.value = true;
                } else {
                    ElMessage.error(res.data as string);
                }
            });
        })
        .finally(() => {
            loading.value = false;
        });
};

// 重置按钮的回调
// 获取仓库
const settingStore = useLayOutSettingStore();
const reset = () => {
    ElMessageBox.confirm("确认后该段内容将不作保存，确认重置吗?", "警告", {
        distinguishCancelAndClose: true,
        confirmButtonText: "确认",
        cancelButtonText: "我再考虑一下",
    }).then(
        () => {
            settingStore.refresh = !settingStore.refresh;
        },
        () => {},
    );
};
const router = useRouter();
// 路由跳转
const goRoute = (flag: number) => {
    let name = "";
    let params = undefined;
    switch (flag) {
        case 0:
            name = "Layout";
            break;
        case 1:
            name = "Subjecthome";
            params = { subjectId: subjectId.value };

            break;
    }
    router.replace({
        name,
        params,
    });
};
</script>

<style lang="scss" scoped></style>
